<template>
	<div class="case-details">
		<div class="breadcrumbs">
			<div class="container">
				<div class="row">
					<div class="col-lg-4 col-sm-4">
						<h1>
							案例赏析
						</h1>
					</div>
					<div class="col-lg-8 col-sm-8">
						<ol class="breadcrumb pull-right">
							<li>
								<a href="#">
									首页
								</a>
							</li>
							<li class="active">
								/案例赏析
							</li>
							<li class="active" id="rtitle">

							</li>
						</ol>
					</div>
				</div>
			</div>
		</div>



		<h1 class="case-title">{{data.title}}</h1>
		<h3 class="case-time">{{data.updateTime}}</h3>
		<div class="box">
			<img :src="data.repImgId" alt="" class="case-img">
		</div>
		<p>{{data.content}}</p>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				data: null,
			}
		},
		created() {
			this.data = this.$route.query.data
			console.log(this.data)
		}
	}
</script>

<style lang="less" scoped>
	.breadcrumbs {
		background: #34495e;
		color: #fff;
		padding: 30px 0;
		margin-bottom: 40px;
		width: 1903px;
		margin-left: -352px;
		height: 28px;
	}

	.breadcrumbs h1 {
		font-size: 24px;
		font-weight: 600;
		margin: 3px 0 0;
		text-transform: uppercase;
		margin-left: 19%;
		margin-top: 0%;
	}

	.breadcrumb {
		margin-bottom: 0;
		background: none;
		font-size: 16px;
		margin-left: 75%;
		margin-top: -23px;
	}

	.breadcrumb li a {
		color: #48cfad;
	}

	.breadcrumb li.active {
		color: #fff;
	}


	.breadcrumb>li {
		display: inline-block;
	}

	.case-details {
		width: 1200px;
		margin: 20px auto;
	}

	.case-title {
		text-align: center;
		font-size: 34px;
		border-bottom: 1px dashed #ddd;
		margin-bottom: 40px;
		padding-bottom: 40px;
	}

	.case-time {
		float: left;
		display: block;
		position: absolute;
		margin-top: -72px;
		margin-left: 48%;
	}

	.box {
		margin: 20px auto;
		width: 800px;
		height: 1000px;
	}

	.case-img {
		width: 968px;
		height: 444px;
		margin-left: -12%;
	}

	p {
		text-align: center;
	}
</style>
